<template>
 <div>
   <el-table :data="cateList" border style="width: 100%" row-key="id"
      :tree-props="{ children: 'children' }">
      <el-table-column prop="id" label="分类编号" width="150"></el-table-column>
      <el-table-column prop="catename" label="分类名称"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="item">
          <div>
            <img
              v-if="item.row.pid != 0"
              class="imgurl"
              :src="$imgUrl + item.row.img"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="editCate(scope.row.id)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
 </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {postDelCate} from '../../util/axios'
export default {
 data() {
  return {
  }
 },
 computed:{
   ...mapGetters({
     cateList:'cate/getCateList',
     
   })
 },
 mounted(){
   this.getCateListAction()
 },
 methods:{
   ...mapActions({
     getCateListAction:'cate/getCateListAction'
   }),
    editCate(id) {
      this.$emit("editCate", id);
    },
    del(id) {
      this.$confirm("确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postDelCate({ id }).then((res) => {
            if (res.data.code == 200) {
              this.getCateListAction();
              this.$message.success(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
 }
}
</script>

<style lang="" scoped>
.imgurl{
  width: 100px;
  height :100px;
  border-radius: 5px;
}

</style>
